<%--
  Created by IntelliJ IDEA.
  User: ttxs
  Date: 2023/7/17
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
  <script>
    function doPage(pageNo) {
      document.forms[0].pageNo.value = pageNo;
      document.forms[0].submit();
    }
    function del(id) {
      $.getJSON('${pageContext.request.contextPath}/users/ajaxDel', {id: id}, function (result) {
        if (result) {
          alert('删除成功');
          location.reload();
        } else {
          alert('删除失败')
        }
      });
    }
    function view(id) {
      $.getJSON('${pageContext.request.contextPath}/users/view', {id: id}, function (result) {
        $("#userInfo").html("<p>" + result.realName +"</p><p>" + result.birthday + "</p>")
      });

      <%--$.get('${pageContext.request.contextPath}/users/view', {id: id}, function (result) {--%>
      <%--  $("#userInfo").html("<p>" + result.realName +"</p><p>" + result.birthday + "</p>")--%>
      <%--}, 'json');--%>

     <%--$.ajax({--%>
     <%--   url: '${pageContext.request.contextPath}/users/view',--%>
     <%--   type: 'get',--%>
     <%--   data: {id: id},--%>
     <%--   dataType: 'json',--%>
     <%--   success: function (result) {--%>
     <%--     $("#userInfo").html("<p>" + result.realName +"</p><p>" + result.birthday + "</p>")--%>
     <%--   }--%>
     <%-- })--%>
    }

    $(function () {
      $.getJSON('${pageContext.request.contextPath}/roles/getAll', function (result) {
        for(let role of result) {
          if (role.id == '${roleId}') {
            $("[name=roleId]").append("<option selected value='" + role.id + "'>" + role.roleName + "</option>")
          } else {
            $("[name=roleId]").append("<option value='" + role.id + "'>" + role.roleName + "</option>")
          }
        }
      })
    })
  </script>
  <body>
  <jsp:include page="/WEB-INF/jsp/header.jsp"/>
  <h1>用户列表</h1>
  <c:if test="${sessionScope.loginUser == null}">
    <a href="${pageContext.request.contextPath}/users/login">登录</a>
  </c:if>
  <c:if test="${sessionScope.loginUser != null}">
    <p>欢迎你，${sessionScope.loginUser.realName}</p>
    <a href="${pageContext.request.contextPath}/users/logout">注销</a>
  </c:if>
  <div>${msg}</div>
  <a href="${pageContext.request.contextPath}/users/add">添加</a>
  <form action="${pageContext.request.contextPath}/users/list" method="post">
<%--    <input name="pageNo" type="hidden"/>--%>
    realName:<input name="realName" value="${realName}"/>
    roleId:
    <select name="roleId">
        <option value="">请选择</option>
    </select>
    <input type="submit" value="查询">
  <table>
    <tr>
      <td>ID</td>
      <td>account</td>
      <td>realName</td>
      <td>birthday</td>
      <td>身份证</td>
      <td>操作</td>
    </tr>
    <c:forEach var="item" items="${page.list}" varStatus="i">

    <tr <c:if test="${i.count%2==0}">style="background-color: antiquewhite"</c:if>>
      <td>${item.id}</td>
      <td>${item.account}</td>
      <td>${item.realName}</td>
      <td><fmt:formatDate value="${item.birthday}" pattern="yyyy.MM.dd"/> </td>
      <td>
        <img src="/s63/${item.idPicPath}" alt="身份证" width="32" height="32">
      </td>
      <td>
        <a href="javascript:void(0)" onclick="view(${item.id})">详情</a>
        <a href="javascript:view(${item.id})">详情2</a>
        <a href="javascript:del(${item.id})" onclick="return confirm('确定删除吗？')">ajax删除</a>
        <a href="${pageContext.request.contextPath}/users/toUpdate?id=${item.id}">修改</a>
        <a href="${pageContext.request.contextPath}/users/toRestUpdate/${item.id}">rest修改</a>
        <a onclick="return confirm('确定删除吗？')" href="${pageContext.request.contextPath}/users/del?id=${item.id}">删除</a>
        <a onclick="return confirm('确定删除吗？')" href="${pageContext.request.contextPath}/users/${item.id}/restDel">rest删除</a>
        <a href="${pageContext.request.contextPath}/users/view2?id=${item.id}">pc端详情</a>
        <a href="${pageContext.request.contextPath}/users/view2.json?id=${item.id}">移动端详情</a>
      </td>
    </tr>
    </c:forEach>
  </table>
  <div>
    当前${page.pageNo}/${page.totalPages}页，共${page.total}条，每页<input onchange="doPage(${page.pageNo})" size="2" name="pageSize" value="${page.pageSize}">条
  </div>
    <div>
      <a href="javascript:void(0)" onclick="doPage(1)">首页</a>
      <a href="javascript:void(0)" onclick="doPage(${page.pageNo - 1})">上页</a>
      <a href="javascript:void(0)" onclick="doPage(${page.pageNo + 1})">下页</a>
      <a href="javascript:void(0)" onclick="doPage(${page.totalPages})">尾页</a>

      <select name="pageNo" onchange="doPage(this.value)">
        <c:forEach var="i"  begin="1" end="${page.totalPages}">
          <option <c:if test="${i ==page.pageNo}">selected</c:if> value="${i}">${i}</option>
        </c:forEach>
      </select>
      <c:forEach var="i" begin="1" end="${page.totalPages}">
        <a href="javascript:void(0)" <c:if test="${i ==page.pageNo}">style="color: red"</c:if>  onclick="doPage(${i})"> ${i}</a>
      </c:forEach>
    </div>
    <div id="userInfo"></div>
  </form>
  </body>
</html>
